<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<title>生命体征检测云平台</title>
		<link rel="shortcut icon" href="static/logo.ico" />
		<link rel="stylesheet" href="static/css/index.css" />
		<link rel="stylesheet" href="static/layui/css/layui.css" />
		<script type="text/javascript" src="static/js/jquery.min.js"></script>
		<script type="text/javascript" src="static/layui/layui.js"></script>
		<script type="text/javascript" src="static/js/vue.js"></script>
		<script type="text/javascript" src="static/js/axios.min.js"></script>
		<style>
			html,
			body,
			#container {
				height: 100%;
				width: 100%;
			}

			.container {
				height: auto;
				width: 100%;
			}

			.container 2 {
				height: auto;
				width: 100%;
			}

			.collision-btn.disable {
				background-image: none;
				color: lightgrey;
				border-color: lightgrey;
				cursor: not-allowed;
			}

			.collision-btn.disable:hover {
				background-color: #fff;
				border-color: lightgrey;
			}

			.input-card .btn {
				margin-right: .8rem;
			}

			.amap-marker {
				opacity: 0.01;
			}

			.nav-right {
				top: 1.5rem !important;
			}

			.info {
				z-index: 999 !important;
			}

			.layui-form-label {
				width: 110px;
				font-size: 14px !important;
			}

			::-webkit-input-placeholder {
				/*Webkit browsers*/
				color: #999;
				font-size: 13px;
			}

			:-moz-placeholder {
				/*Mozilla Firefox 4 to 8*/
				color: #999;
				font-size: 13px;
			}

			::moz-placeholder {
				/*Mozilla Firefox 19+*/
				color: #999;
				font-size: 13px;
			}

			:-ms-input-placeholder {
				/*Internet Explorer 10+*/
				color: #999;
				font-size: 13px;
			}

			.layui-form-pane .layui-input {
				height: 38px !important;
			}

			.layui-form-onswitch {
				border-color: #063683;
				background-color: #063683;
			}

			.layui-form-switch {
				width: 50px;
				height: 24px;
			}

			.layui-form-label {
				width: 150px;
			}

			.layui-table-view {
				margin-left: 43px;
			}

			.laytable-cell-1-0-0 {
				width: 80px;
			}

			.laytable-cell-1-0-1 {
				width: 220px;
			}

			.laytable-cell-1-0-2 {
				width: 100px;
			}
		</style>
		<script type="text/html" id="baratop">
			<a class="layui-btn layui-btn-xs" lay-event="add">新增</a>
		</script>
		<script type="text/html" id="barbotn">
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
		<script>
			layui.use(['table', 'form', 'layedit', 'laydate'], function() {

				var rloginName = localStorage.loginName;
				var table = layui.table,
					form = layui.form,
					layer = layui.layer,
					layedit = layui.layedit,
					laydate = layui.laydate;
				table.render({
					elem: '#jjlxr', //table元素
					id: 'tabAddSell',
					defaultToolbar: false,
					toolbar: '#baratop',
					page: false,
					width: 400,
					data: [], //这里赋初始值
					cols: [
						[, {
							field: 'uname',
							width: 80,
							title: '用户名'
						}, {
							field: 'phone',
							width: 220,
							title: '电话'
						}, , {
							fixed: 'right',
							title: '操作',
							toolbar: '#barbotn',
							width: 100
						}]
					]
				});
				//头工具栏事件
				table.on('toolbar(jjlxr)', function(obj) {

					switch (obj.event) {
						//add 既是我的按钮上 lay-event="add" 的值
						case 'add':
							var dataBak = [];
							//获取之前的数据 able.cache.titleId;  titleId 就是该表格ID
							var tableBak = table.cache.titleId;
							// for 循环之前的数组
							for (var i = 0; i < tableBak.length; i++) {
								//将之前的数据保存到 空数组中
								dataBak.push(tableBak[i]);
							}
							//空数组被插入在dataBak尾部 此时数据已新增
							dataBak.push({
								"uname": "",
								"phone": ""
							});
							table.reload("titleId", {
								// 将新数据 dataBak  重新载入ID为 titleId 的表格 实现新增一行效果
								data: dataBak
							})
							break;
					}
				});
				//监听指定开关
				form.on('switch(switchsm)', function(data) {
					if (this.checked) {
						$('#smval').val(1);
						$('#smdate').show();
					} else {
						$('#smval').val(0);
						$('#smdate').hide();
					}
					layer.tips('温馨提示：设置睡眠提醒后。请选择时间', data.othis)
				});
				//监听指定开关
				form.on('switch(switchopen)', function(data) {
					if (this.checked) {
						$('#isopen').val(1);
						$('#show').show();
					} else {
						$('#isopen').val(0);
						$('#show').hide();
					}
				});
				//时间选择器
				laydate.render({
					elem: '#smdate',
					type: 'time'
				});
				$.ajax({
					url: url + "/user/equipment/infoList?userId=" + rloginName,
					dataType: 'json',
					type: 'get',
					async: false,
					success: function(res) {
						$.each(res, function(index, item) {
							var option;
							if (item.equName != null || item.equName !=
								"" || item.equName != "null") {
								option = new Option(item.equName, item.equName);
							}
							$('#einfo').append(option); // 下拉菜单里添加元素
						}); +
						form.render("select");
						//重新渲染 固定写法
					}
				});
				$.ajax({
					data: {
						"equName": "06"
					},
					url: url + "/outOfBed/info",
					dataType: 'json',
					type: 'post',
					async: false,
					success: function(res) {
						console.log(res)
						form.render("select");
						//重新渲染 固定写法
					}
				});
			});
		</script>
	</head>
	<body>
		<div id="app">
			<div style="margin-top: 70px;background-color: #e5e5e5;"></div>
			<div class="layui-panel" style="float: left; width: 10% !important;" id="pnav">
			</div>
			<div class="container" style="width: 90% !important; float: right;padding-left: 30px;">
				<div class="layui-fluid">
					<fieldset class="layui-elem-field layui-field-title">
						<legend>离床报警</legend>
					</fieldset>
					<div class="layui-row">
						<div class="layui-col-sm12"
							style="padding: 20px;box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);background: #fff;">
							<div class="grid-demo grid-demo-bg1">
								<div class="layui-row">
									<div class="layui-col-md12" style="font-size: 18px;padding: 20px;">
										<!--  -->

										<form class="layui-form " action="">
											<div class="layui-form-item">
												<label class="layui-form-label">离床报警</label>
												<div class="layui-input-block">
													<input type="hidden" value="" id="isopen" />
													<input type="checkbox" name="open" lay-skin="switch"
														lay-filter="switchopen" lay-text="开|关">
												</div>
											</div>
											<div id="show" style="display: none;">
												<div class="layui-form-item">
													<label class="layui-form-label">紧急联系人</label>
													<div class="layui-input-block">
														<!-- <table class="layui-hide" id="jjlxr"></table> -->
														<div class="layui-form layui-border-box layui-table-view"
															style="width:400px; ">
															<div class="layui-table-tool">
																<div class="layui-table-tool-temp">
																	<a class="layui-btn layui-btn-xs"
																		@click="jjlxrAdd">新增</a>
																</div>
																<div class="layui-table-tool-self"></div>
															</div>
															<div class="layui-table-box">
																<div class="layui-table-header">
																	<table cellspacing="0" cellpadding="0" border="0"
																		class="layui-table">
																		<thead>
																			<tr>
																				<th data-field="uname" data-key="1-0-0"
																					class="" style="width: 160px;">
																					<div class="layui-table-cell laytable-cell-1-0-0 laytable-cell-undefined"
																						style="width: 100%;">
																						<span>用户名</span>
																					</div>
																				</th>
																				<th data-field="phone" data-key="1-0-1"
																					class="" style="width: 350px;">
																					<div class="layui-table-cell laytable-cell-1-0-1"
																						style="width: 100%;">
																						<span>电话</span>
																					</div>
																				</th>
																				<th data-field="2" data-key="1-0-2"
																					class=" layui-table-col-special"
																					style="width: 100px;">
																					<div class="layui-table-cell laytable-cell-1-0-2 laytable-cell-undefined"
																						style="width: 100%;">
																						<span>操作</span>
																					</div>
																				</th>
																			</tr>
																		</thead>
																	</table>
																</div>
																<div class="layui-table-body layui-table-main">
																	<table cellspacing="0" cellpadding="0" border="0"
																		class="layui-table">
																		<tbody>
																			<tr class=""
																				v-for="(item,index) in jjlxrlist">
																				<td class="" style="width: 160px;">
																					<div
																						class="layui-table-cell laytable-cell-1-undefined ">
																						{{item.lxrName}}
																					</div>
																				</td>
																				<td data-field="phone" data-key="1-0-1"
																					class="" style="width: 350px;">
																					<div class="layui-table-cell laytable-cell-1-0-1"
																						style="width: 100%;">
																						{{item.lxrPhone}}
																					</div>
																				</td>
																				<td data-field="2"
																					data-key="1-undefined"
																					data-off="true"
																					class="layui-table-col-special"
																					style="width: 100px;">
																					<div class="layui-table-cell laytable-cell-1-undefined laytable-cell-undefined"
																						style="width: 100%;">
																						<a class="layui-btn layui-btn-danger layui-btn-xs"
																							@click="jjlxrdel(index)">删除</a>
																					</div>
																				</td>
																			</tr>

																		</tbody>
																	</table>
																</div>
																<div class="layui-table-fixed layui-table-fixed-r layui-hide"
																	style="right: -1px;">
																	<div class="layui-table-header">
																		<table cellspacing="0" cellpadding="0"
																			border="0" class="layui-table">
																			<thead>
																				<tr>
																					<th data-field="2" data-key="1-0-2"
																						class=" layui-table-col-special">
																						<div
																							class="layui-table-cell laytable-cell-1-0-2 laytable-cell-undefined">
																							<span>操作</span>
																						</div>
																					</th>
																				</tr>
																			</thead>
																		</table>
																		<div class="layui-table-mend"></div>
																	</div>

																</div>
															</div>

														</div>
													</div>
												</div>
												<div class="layui-form-item" style="display: none;">
													<label class="layui-form-label">睡眠提醒</label>
													<div class="layui-input-block">
														<input type="hidden" value="" id="smval" value="0" />
														<input type="checkbox" name="open" lay-skin="switch"
															lay-filter="switchsm" lay-text="开|关">
														<input type="text" class="layui-input" id="smdate"
															placeholder="HH:mm:ss" value="20:00:00" lay-key="6"
															style="width: 120px;margin-top: 10px;margin-left: 10px;display: none;">
													</div>
												</div>
												<div class="layui-form-item">
													<div class="layui-inline">
														<label class="layui-form-label">设备选择</label>
														<div class="layui-input-inline">
															<select name="modules" lay-verify="required" lay-search=""
																id="einfo">
																<option value="">直接选择或搜索选择</option>
															</select>
														</div>
													</div>
												</div>
												<div class="layui-form-item" style="margin: 0;">
													<label class="layui-form-label"
														style="font-size: 15px !important">告警通知时间间隔</label>
												</div>
												<div class="layui-form-item">
													<label class="layui-form-label"
														style="color:#9F9F9F !important;">通知栏提醒</label>
													<div class="layui-input-block">
														<input type="radio" name="tzltx" value="30" title="30分钟">
														<input type="radio" name="tzltx" value="60" title="1小时">
														<input type="radio" name="tzltx" value="90" title="1.5小时">
														<input type="radio" name="tzltx" value="120" title="2小时">
													</div>
												</div>
												<div class="layui-form-item">
													<label class="layui-form-label"
														style="color:#9F9F9F !important;">短信提醒</label>
													<div class="layui-input-block">
														<input type="radio" name="dxtx" value="30" title="30分钟">
														<input type="radio" name="dxtx" value="60" title="1小时">
														<input type="radio" name="dxtx" value="90" title="1.5小时">
														<input type="radio" name="dxtx" value="120" title="2小时">
													</div>
												</div>
												<div class="layui-form-item">
													<label class="layui-form-label"
														style="color:#9F9F9F !important;">电话提醒</label>
													<div class="layui-input-block">
														<input type="radio" name="dhtx" value="30" title="30分钟">
														<input type="radio" name="dhtx" value="60" title="1小时">
														<input type="radio" name="dhtx" value="90" title="1.5小时">
														<input type="radio" name="dhtx" value="120" title="2小时">
													</div>
												</div>
											</div>
										</form>
										<div class="layui-form-item">
											<div class="layui-input-block">
												<button type="submit" class="layui-btn met04" lay-submit=""
													lay-filter="demo1" v-on:click="insertSq">立即保存</button>
												<!-- <button type="reset" class="layui-btn layui-btn-primary">重置</button> -->
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				
				
				</div>
			</div>
			<div class="info">
				<div class="nav-left">
					<a class="login"></a>
					<a class="hometext" href="index.html" v-if="uInfoData.loginType !=1">首页</a>
					<a class="hometext" href="home.html" v-if="uInfoData.loginType == 1">首页</a>
				</div>
				<div class="nav-right">
					<ul>
						<li><a href="monitoring.html" v-if="uInfoData.loginType !=1">监测</a></li>
						<li><a href="historical_data.html" v-if="uInfoData.loginType !=1">历史数据</a></li>
						<li><a href="historical_info.html" v-if="uInfoData.loginType == 1">历史数据</a></li>
						<li><a href="call_p.html">离床报警</a></li>
						<li><a href="#">康养中心</a></li>
						<li><a href="#">中医问诊</a></li>
					</ul>
				</div>
				<div class="userinfo" id="userinfo">
					<img src="static/image/user.png" />
					<!-- <div class="red-dot"></div> -->
					<ul class="user_dropdown">
						<li class="dropdown_item user_ctrl">
							<div class="nickname">{{uInfoData.userName}}</div>
							<div class="sign_out">退出</div>
						</li>
						<li class="dropdown_item msg_item">
							<a href="user.html" target="_blank">
								<span>个人中心</span>
							</a>
						</li>
						<li class="dropdown_item msg_item">
							<a href="my_message.html" target="_blank">
								<span>我的消息</span>
								<span class="msg_unread unread_count show">5</span>
							</a>
						</li>
						<li class="dropdown_item">
							<a href="equipment.html">
								<span>设备</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="static/js/config.js"></script>
		<script>
			$(function() {
				$("#pnav").load("public_navigation.html");
				$(".sign_out").click(function() {
					localStorage.clear();
					window.location = 'login.html'
				});
			});
			var vm = new Vue({
				el: '#app', //设置当前vue对象可以操作数据的范围,注意不要把vue对象绑定到body中，因为这样，vue需要控制整个页面的内容，效率太低了
				data: {
					uInfoData: [],
					jjlxrlist: [],
					jjlxrmcs: '',
					jjlxrdhs: ''

				},
				ready: function() {
					// this.getdata();
				},
				created: function() {
					this.getdata();

				},
				methods: {
					getdata: function() {
						var rloginName = localStorage.loginName;
						console.log(rloginName);
						if (rloginName == '' || rloginName == 'null' || rloginName == undefined) {
							// layer.msg('登录过期或者无权访问！', {
							// 	time: 1000,
							// 	end: function() {
							// 		// location.href = 'login.html'
							// 	}
							// })
						} else {
							axios({
									method: 'GET',
									url: url + "/user/userInfo/lquserOwnInfo?phoneNum=" + rloginName,
									data: {}
								})
								.then(function(response) {
									console.log(response)
									vm.uInfoData = response.data;
								})
							axios({
									method: 'GET',
									url: url + "/user/equipment/infoList?userId=" + rloginName,
									data: {}
								})
								.then(function(response) {
									console.log(response)
									vm.uInfoData = response.data;
								})
						}

					},
					jjlxrAdd: function() {

						var jsonarray = new Array();
						let jjlxrjosns = localStorage.jjlxrjosn;
						if (jjlxrjosns != null) {
							if (jjlxrjosns.length > 0) {
								let jjlxrdata = JSON.parse(jjlxrjosns);
								if (jjlxrdata.length > 0) {
									vm.jjlxrlist = jjlxrdata;
									jsonarray = jjlxrdata;
								}
							} else {

								jsonarray = "";
							}
						}
						let contents = '<div class="layui-form-item" >' +
							'<div class="layui-inline"><label class="layui-form-label"  style="width: 80px;">用户名</label>' +
							'<div class="layui-input-inline">' +
							'<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入姓名" class="layui-input" style="height: 37px;" onchange="showjjlxrmc(this)"  >' +
							'</div>' + '</div></div>' + '<div class="layui-form-item">' +
							' <div class="layui-inline">' +
							'<label class="layui-form-label"  style="width: 80px;">电话</label>' +
							'<div class="layui-input-inline">' +
							'<input type="tel" name="phone" class="layui-input" autocomplete="off" placeholder="请输入电话" onchange="showdjjlxrhs(this)"  >' +
							' </div>' + '</div>';
						layer.open({
							title: "标题",
							content: contents,
							btn: ['确定', '取消'],
							success: function(layero, index) {},
							yes: function(index, layero) {
								var jjlxrmc = localStorage.jjlxrmcs;
								var jjlxrdhs = localStorage.jjlxrdhs;
								var str = {
									'lxrName': jjlxrmc,
									'lxrPhone': jjlxrdhs
								};
								jsonarray.push(str);
								localStorage["jjlxrjosn"] = JSON.stringify(jsonarray);
								layer.close();
							},
							btn2: function(index, layero) {
								layer.close(index);
							}
						});
						vm.jjlxrlist = jsonarray;
					},
					jjlxrdel: function(index) {
						console.log(index)
						let jjlxrjosns = localStorage.jjlxrjosn;
						if (jjlxrjosns.length > 0) {
							let jjlxrdata = JSON.parse(jjlxrjosns);
							if (jjlxrdata.length > 0) {
								jjlxrdata.splice(index, 1)
								vm.jjlxrlist = jjlxrdata;
							}
							localStorage["jjlxrjosn"] = JSON.stringify(jjlxrdata);
						}
					},
					insertSq: function() {
						var rloginName = localStorage.loginName;
						var jjlxrlist = vm.jjlxrlist;
						let lxrJson = JSON.parse(JSON.stringify(jjlxrlist));
						var isopen = $('#isopen').val();
						var smval = '0'; //$('#smval').val();
						var smdate = $('#smdate').val();
						var einfo = $('#einfo').val();
						var tzltx = $("input[name='tzltx']:checked").val();
						var dxtx = $("input[name='dxtx']:checked").val();
						var dhtx = $("input[name='dhtx']:checked").val();
						let data = {
							'equName': einfo,
							'isOpen': isopen,
							'lxrJson': lxrJson,
							'isWs': smval,
							'wsTime': smdate,
							'tzlTimejg': tzltx,
							'dxTimejg': dxtx,
							'dhTimejg': dhtx,
							'familyId': "",
							'userPhone': rloginName
						};
						if (data == "undefined" || data == null || data == "") {
							layer.msg('所有选项不能为空！')
						} else {
							axios({
									method: 'POST',
									url: url + "/outOfBed/insert",
									data: data //JSON.parse(JSON.stringify(sqInfo))
								})
								.then(function(response) {
									var data = response.data;
									var message = response.data.message;
									if (data.code == 0) {
										localStorage["jjlxrjosn"] = '';
										layer.msg(message, {
											time: 2000,
											end: function() {
												location.href = 'bed_alarm.html'
											}
										})
									} else {
										layer.msg(message);
									}
								})
						}
					}
				}
			})

			function showjjlxrmc(obj) {
				localStorage["jjlxrmcs"] = '';
				let val = obj.value;
				localStorage["jjlxrmcs"] = val;
			}

			function showdjjlxrhs(obj) {
				localStorage["jjlxrdhs"] = '';
				let val = obj.value;
				localStorage["jjlxrdhs"] = val;

			}
		</script>



	</body>
</html>
